<template>
    <u-navbar
        title="小区详情"
        autoBack
        placeholder
        height="44px"
    >
    </u-navbar>
    <view class="app-container" style="padding-bottom: 200rpx;">
        <u-swiper 
            :list="list"
            height="400rpx"
            indicator
        ></u-swiper>
        <!-- <view class="card mt20">
            <view class="justify-between mb16 card-head">
                <view class="text-center weight mr16">
                    <view class="scoring">8.2</view>
                    <view class="font22">小区评分</view>
                </view>
                <view class="font22 weight flex1">
                    <view class="justify-around">
                        <view>地段交通</view>
                        <view class="progress"></view>
                        <view>8.6</view>
                    </view>
                    <view class="justify-around" style="margin: 10rpx 0;">
                        <view>生活配套</view>
                        <view class="progress"></view>
                        <view>8.6</view>
                    </view>
                    <view class="justify-around">
                        <view>居住品质</view>
                        <view class="progress"></view>
                        <view>8.6</view>
                    </view>
                </view>
            </view>
            <view class="tag-text">
                <view class="tag fl">小区评测</view>
                <view class="font26 text">
                    距离小区最近的地铁站是西兴地铁口，约643米；距离小区最近的公交站是铁铃关，96路等会经停本站。
                </view>
            </view>
        </view> -->
        <view style="margin: 26rpx 0;">
            <view class="font30 weight mb20">基本信息：</view>
            <view class="font28 mb20">
                <text class="grey">小区名称：</text>
                <text class="weight">春波西苑</text>
            </view>
            <view class="font28 mb20">
                <text class="grey">小区地址：</text>
                <text class="weight">滨江区春波路与江晖路交叉口</text>
            </view>
            <view class="mb20 font28 align-center">
                <view class="flex1">
                    <text class="grey">供水供电：</text>
                    <text class="weight">民用</text>
                </view>
                <view class="flex1">
                    <text class="grey">建筑类型：</text>
                    <text class="weight">多层</text>
                </view>
            </view>
            <view class="font28 mb20">
                <text class="grey">总 户 数：</text>
                <text class="weight">539户</text>
            </view>
        </view>
        <view style="margin-bottom: 26rpx;">
            <view class="font30 weight mb20">物业信息：</view>
            <view class="font28 mb20">
                <text class="grey">物 业 费：</text>
                <text class="weight">2.98元/㎡/月</text>
            </view>
            <view class="font28 mb20">
                <text class="grey">水     费：</text>
                <text class="weight">1元1度</text>
            </view>
            <view class="font28 mb20">
                <text class="grey">停 车 费：</text>
                <text class="weight">地面150.00元/月，地下200.00元/月</text>
            </view>
            <view class="font28 mb20">
                <text class="grey">物业公司：</text>
                <text class="weight">保利物业服务有限公司</text>
            </view>
            <view class="font28 mb20">
                <text class="grey">小区内垃圾站位置：</text>
                <text class="weight purple text-underline">查看地图</text>
            </view>
        </view>
        <view style="margin-bottom: 26rpx;">
            <view class="font30 weight mb20">物业信息：</view>
            <view class="font28 mb20">
                <text class="grey">街道办事处：</text>
                <text class="weight">江一社区</text>
            </view>
            <view class="font28 mb20">
                <text class="grey">办事处地址：</text>
                <text class="weight">滨江区春波路与江晖路交叉口</text>
            </view>
            <view class="font28 mb20">
                <text class="grey">办事处电话：</text>
                <text class="weight">0394-75860</text>
            </view>
        </view>
    </view>
    <view class="footer justify-around text-center">
        <view>
            <i class="iconfont icon-faxian-ditu purple" style="font-size: 50rpx;"></i>
            <view class="font26 grey mt16">是我的小区</view>
        </view>
        <u-line direction="col" color="#E1E1E1" length="56rpx"></u-line>
        <view>
            <u-icon name="heart" color="#966BFF" size="28"></u-icon>
            <view class="font26 grey mt16">关注</view>
        </view>
        <u-line direction="col" color="#E1E1E1" length="56rpx"></u-line>
        <view>
            <i class="iconfont icon-quzheli purple" style="font-size: 50rpx;"></i>
            <view class="font26 grey mt16">去这里</view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useUserPinia } from '@/store/modules/user';

const useUser = useUserPinia();

const list = ref([
  'https://cdn.uviewui.com/uview/swiper/swiper1.png',
  'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  'https://cdn.uviewui.com/uview/swiper/swiper3.png'
]);
</script>

<style lang="scss" scoped>
.card {
    margin-bottom: 26rpx;
    padding: 20rpx 30rpx;
    border: 1rpx solid #F4BB44;
    border-radius: 12rpx;
    background: #FDF9EE;

    .card-head {
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #E1E1E1;
    }

    .scoring {
        font-size: 46rpx;
    }

    .progress {
        width: 292rpx;
        height: 8rpx;
        border-radius: 4rpx;
        background: #E8EBEE;
    }

    .tag-text {

        .tag {
            margin: 0 16rpx 8rpx 0;
            padding: 2rpx 10rpx;
            border: 1rpx solid #F4BB44;
            border-radius: 2rpx;
            font-size: 22rpx;
            color: #F4BB44;
        }

        .text {
            line-height: 46rpx;
        }
    }
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 22rpx 0 40rpx;
    background: #fff;
    box-shadow: 0rpx -3rpx 6rpx 1rpx rgba(0,0,0,0.03);
}
</style>